<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="queryForm" :model="passobj" :inline="true" class="form-inline">
        <el-form-item label="任务名称" prop="jobName">
          <el-select v-model="passobj.jobId" class="filter-item" placeholder="请选择任务">
            <el-option v-for="(item, index) in fastlist" :key="index" :label="item.jobName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          {{ $t('table.search') }}
        </el-button>
      </el-form>
      <!-- <div class="filter-item">
        <span>规则名称:</span>
        <el-input v-model="listQuery.rulesName" placeholder="请输入规则名称" style="width: 200px" />
      </div>
      <div class="filter-item">
        <span>规则类型:</span>
        <el-input v-model="listQuery.rulesType" placeholder="请输入规则类型" style="width: 200px" />
      </div>
      <div class="filter-item">
        <span>失败原因:</span>
        <el-input v-model="listQuery.reason" placeholder="请输入失败原因" style="width: 200px" />
      </div> -->

      <!-- <el-button v-waves v-permission="['log:metadataJoblog:add']" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button> -->
    </div>

    <el-table ref="table" :key="tableKey" v-loading="listLoading" :data="list" element-loading-text="正在加载，请稍后" border fit highlight-current-row max-height="700">
      <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="任务名称">
              <span>{{ props.row.executeJobName}}</span>
            </el-form-item>
            <el-form-item label="日志状态">
              <span>{{ props.row.status | dictLabel('is_success') }}</span>
            </el-form-item>
            <el-form-item label="执行批次号">
              <span>{{ props.row.executeBatch  }}</span>
            </el-form-item>

            <el-form-item label="执行时间">
              <span>{{ props.row.runDate | parseTime('{y}-{m}-{d}') }}</span>
            </el-form-item>
            <el-form-item label="规则名称">
              <span>{{ props.row.rulesName }}</span>
            </el-form-item>
            <el-form-item label="规则类型">
              <span>{{ props.row.rulesType }}</span>
            </el-form-item>
            <el-form-item label="任务Id">
              <span>{{ props.row.jId }}</span>
            </el-form-item>
            <el-form-item label="失败原因">
              <span>{{ props.row.reason }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column type="index" label="序号" align="center" width="50" />

      <el-table-column label="任务名称" align="center" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.executeJobName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日志状态" align="center" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.status | dictLabel('is_success') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="执行批次号" align="center" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.executeBatch }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="状态（0失败、1执行者，2成功）" min-width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status | dictLabel('is_run') }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="执行时间" prop="executeDate" :formatter="formatDate" min-width="150px" align="center">
        <!-- <template slot-scope="{row}">
          <span>{{ row.executeDate  }}</span>
        </template> -->
      </el-table-column>
      <!-- <el-table-column label="规则名称" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.rulesName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规则类型" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.rulesType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务Id" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.jId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失败原因" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.reason }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" min-width="150px">
        <template slot-scope="{row}">
          <span v-if="row.metadata_job">{{ row.metadata_job.job_name }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" fixed="right" align="center" min-width="150" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button v-permission="['log:metadataJoblog:update']" type="text" size="small" icon="el-icon-edit" @click="handleLook(row)">
            {{ $t('table.checklog') }}
          </el-button>
          <!-- <el-button v-permission="['log:metadataJoblog:delete']" type="text" size="small" icon="el-icon-delete" class="delete-text-btn" @click="handleDelete(row,'deleted')">
            {{ $t('table.delete') }}
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes="pageArray" @pagination="getList" />
    <logData ref="logData"></logData>
    <metadata-joblog-form ref="form" @refreshList="getList" />
  </div>
</template>

<script>
import moment from 'moment'
import { deletemetadataJoblog, fetchmetadataJoblogList, getLogData } from '@/api/log/metadataJoblog'
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/permission'
import metadataJoblogForm from './metadataJoblogForm'
import logData from './child/logData.vue'
import Pagination from '@/components/Pagination'
import { fetchmetadataJobList } from '@/api/job/metadataJob'
// import dayjs from 'dayjs'
export default {
  name: 'metadataJoblogList',
  components: { metadataJoblogForm, Pagination, logData },
  directives: { waves, permission },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        jobId: '',
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
      fastlist: [],
      passobj: {
        jobId: '',
        page: 1,
        limit: 999,
      },
    }
  },
  created() {
    fetchmetadataJobList(this.passobj).then((response) => {
      if (response.data.code == 200) {
        this.fastlist = response.data.data.rows
        this.listLoading = false
      } else {
        this.$message.error(response.data.msg)
      }
    })
    this.getList()
  },
  methods: {
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return null
      }
      // let dt = new Date(data)
      // return dayjs(dt).format('YYYY-MM-DD HH:DD:ss')
      return moment(data).format('YYYY-MM-DD HH:mm:ss')
    },
    getList() {
      // this.listLoading = true
      fetchmetadataJoblogList(this.passobj).then((response) => {
        if (response.data.code == 200) {
          this.list = response.data.data.records
          this.total = response.data.data.total
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    handleCreate() {
      this.$refs.form.handleCreate()
    },
    handleUpdate(row) {
      this.$refs.form.handleUpdate(row.id)
    },
    handleLook(row) {
      this.$refs.logData.handleUpdate(row.id)
    },
    handleDelete(row) {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deletemetadataJoblog(row.id).then((response) => {
          if (response.data.code === 0) {
            this.getList()
            this.$message.success(response.data.msg)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
